import { defineComponent, reactive } from "vue";
import styles from "./service.module.less";
import { imgPath } from "@/common/utils";

export default defineComponent({
  name: 'service',
  setup() {
    const state = reactive({
      list: [
        {
          icon: imgPath('/home/service-img1.png'),
          name: '智能产品管理',
          english: 'Intelligent Product Management',
          content: '保险产品门槛低保障全',
        },
        {
          icon: imgPath('/home/service-img2.png'),
          name: '全面调解服务',
          english: 'Comprehensive mediation services',
          content: '提供保险经纪、调解处理、紧急救援、安全培训和风险管理服务',
        },
        {
          icon: imgPath('/home/service-img3.png'),
          name: '一站式索赔服务',
          english: 'One stop claims service',
          content: '完整索赔流程与服务',
        },
        {
          icon: imgPath('/home/service-img4.png'),
          name: '健康安全服务',
          english: 'Health and safety services',
          content: '拥有行业风险管理专家的职责',
        },
      ]
    });
    //头部标题
    const HeaderTitle = (props: any) => (
      <div class={styles.header}>
        <div class={styles.title}>{props.title}</div>
      </div>
    )
    return () => (
      <div class={styles.service}>
        <HeaderTitle title="保险经纪服务" />
        <div class={styles.container}>
          <div class={styles.list}>
            {
              state.list.map((item: any) => (
                <div class={styles.item}>
                  <div class={styles.box}>
                    <div class={styles['img-box']}>
                      <img src={item.icon}/>
                    </div>
                  </div>
                  <div class={styles.box}>
                    <div class={styles['info-box']}>
                      <div class={styles.title}>{item.name}</div>
                      <div class={styles.english}>{item.english}</div>
                      <div class={styles.content}>
                        <span>{item.content}</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
})